<#include "module/macro.ftl">
<@head title="分类：${category.name!} - ${blog_title!}"/>
<#include "module/sidebar.ftl">
<!-- ===========================
    =====>> News <<===== -->
<section class="news-area pt-120 pb-120">
    <div class="container" id="container">
        <div class="row">
            <div class="col-md-8">
                <div class="news-page-left" id="news-page-left">
                    <#list posts.content as post>
                        <div class="single-news">
                            <div class="news-text">
                                <#if post.thumbnail?? && post.thumbnail!=''>
                                    <div class="news-image">
                                        <a href="${post.fullPath!}">
                                            <img src="${post.thumbnail!}" alt="${post.title!}">
                                        </a>
                                    </div>
                                </#if>
                                <h2 class="news-title">
                                    <a href="${post.fullPath!}">${post.title!}</a>
                                </h2>
                                <div class="news-meta">
                                    <p>${post.createTime?string('yyyy-MM-dd')} / ${user.nickname!}
                                        / ${post.visits?c} 阅读</p>
                                </div>
                                <p>${post.summary!}</p>
                                <a href="${post.fullPath!}" class="btn-1 hover-effect">阅读更多</a>
                            </div>
                        </div>
                    </#list>
                </div>
                <div class="pagination_box">
                    <@paginationTag method="categoryPosts" slug="${category.slug!}" page="${posts.number}" total="${posts.totalPages}" display="3">
                        <ul class="pagination" id="pagination">
                            <#if pagination.hasNext && posts.content?size == 10>
                                <li><a href="${pagination.nextPageFullPath!}">加载更多</a></li>
                            <#else>
                                <li>
                                    <span>没有更多了</span>
                                </li>
                            </#if>
                        </ul>
                    </@paginationTag>
                </div>
            </div>
            <div class="col-md-4 pl-5">
                <#include "module/news-page-right.ftl">
            </div>
        </div>
    </div>
</section>
<#--<script src="${theme_base!}/source/js/jquery-3.4.1.min.js"></script>-->
<script>
$("body").on("click", "#pagination a", function () {
    $(this).addClass("loading").text("");
    $.ajax({
        type: "GET",
        url: $(this).attr("href") + "#news-page-left",
        success: function (data) {
        var result = $(data).find("#news-page-left .single-news");
        var nextHref = $(data).find("#pagination a").attr("href");
        // 添加新的内容
        $("#news-page-left").append(result.fadeIn(500));
        $("#pagination a").removeClass("loading").text("加载更多");
        if (nextHref != undefined) {
            $("#pagination a").attr("href", nextHref);
        } else {
           $("#pagination li").html("<span>没有更多了</span>");
        }
        },
    });
    return false;
});
</script>
<@footer></@footer>